<template>
	<a-spin :spinning="loading">
		<a-modal v-model="detailModal" :footer="null" title="订单详情" width="60%">
			<!--   <a-spin class="my-20 flex justify-center		" v-if="modalLoading"  /> -->
			<section class="p-8 pl-24" style="background: #f0f0f0;">
				用户信息：
			</section>
			<section class="flex flex-wrap mt-10 pl-24">
				<div class="mb-10" style="width: 50%;">下单人：{{ details.user.nickname }}</div>
				<div class="mb-10" style="width: 50%;">收件电话：{{ details.receiverMobile }}</div>
				<div class="mb-10" style="width: 50%;">收件人：{{ details.receiverName }}</div>
				<div class="mb-10" style="width: 50%;">收件地区：{{ details.receiverAreaName }}</div>
				<div class="mb-10" style="width: 50%;">收件地址：{{ details.receiverDetailAddress }}</div>
			</section>
			<section class="p-8 pl-24" style="background: #f0f0f0;">
				商品信息：
			</section>
			<section class="flex flex-wrap mt-10 pl-24" v-for="(item,index) in details.items" :key="index">
				<div class="mb-10" style="width: 50%;">商品名称：{{ item.spuName }}</div>
				<div class="mb-10" style="width: 50%;">商品规格：{{ item.spuName }}</div>
				<div class="mb-10" style="width: 50%;">商品照片：<img :src="item.picUrl" alt="" /></div>
				<div class="mb-10" style="width: 50%;">商品价格：{{ item.payPrice/100 }}</div>
<!--				<div class="mb-10" style="width: 50%;">商品类型：{{ details.occurrenceTime }}</div>-->
<!--				<div class="mb-10" style="width: 50%;">商品分类：{{ details.occurrenceTime }}</div>-->
			</section>
			<section class="p-8 pl-24" style="background: #f0f0f0;">
				订单信息：
			</section>
			<section class="flex flex-wrap mt-10 pl-24">
				<div class="mb-10" style="width: 50%;">订单号：{{ details.no }}</div>
				<div class="mb-10" style="width: 50%;">下单时间：{{ $utils.formatTimestamp(details.createTime) }}</div>
				<div class="mb-10" style="width: 50%;">购买数量：{{ details.productCount }}</div>
				<div class="mb-10" style="width: 50%;">支付时间：{{ details.payTime?$utils.formatTimestamp(details.payTime):'' }}</div>
				<div class="mb-10" style="width: 50%;">订单金额：{{ details.totalPrice/100 }}</div>
				<div class="mb-10" style="width: 50%;">发货（服务）时间：{{ details.deliveryTime?$utils.formatTimestamp(details.deliveryTime):''}}</div>
				<div class="mb-10" style="width: 50%;">优惠券名称：{{ details.couponId }}</div>
				<div class="mb-10" style="width: 50%;">完成时间：{{ details.receiveTime?$utils.formatTimestamp(details.receiveTime):'' }}</div>
				<div class="mb-10" style="width: 50%;">优惠金额：{{ details.discountPrice/100 }}</div>
				<div class="mb-10" style="width: 50%;">物流单号：{{ details.logisticsNo }}</div>
				<div class="mb-10" style="width: 50%;">运费：{{ details.deliveryPrice/100 }}</div>
<!--				<div class="mb-10" style="width: 50%;">获得积分：{{ details.applyUserName }}</div>-->
				<div class="mb-10" style="width: 50%;">支付金额：{{ details.payPrice/100 }}</div>
				<div class="mb-10" style="width: 50%;">抵扣积分：{{ details.pointPrice/100 }}</div>
				<div class="mb-10" style="width: 50%;">订单状态：{{ statusLists[details.status] }}</div>
				<div class="mb-10" style="width: 50%;">订单类型：{{ typeLists[details.type] }}</div>
				<div class="mb-10" style="width: 50%;">下单备注：{{ details.userRemark }}</div>

			</section>

		</a-modal>
	</a-spin>
</template>
<script>
	import {
		deductionDetail
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				details: {},
				detailModal: false,
        statusLists: {0:'待付款',10:'待发货',20:'待收货',30:'已完成',40:'已取消'},
        typeLists: {0:'普通订单',1:'秒杀订单',2:'砍价订单',3:'拼团订单',7:'服务订单'},
			}
		},
		computed: {},
		watch: {},
		async created() {},
		methods: {
			getData(val) {
				try {
        this.loading = true
        deductionDetail({
          id: val.id,
        })
          .then((data) => {
            this.details = data
          })
          .finally(() => (this.loading = false))
      } catch (error) {
        console.log(error)
        this.loading = false
      }
			},
			open(data) {
				this.detailModal = true
				console.log(data,'data')
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/.ant-modal-body {
		padding-left: 0;
		padding-right: 0;
	}

	/deep/.GasolineRate {
		.ant-form-item-label {
			width: 100px !important;
			margin-bottom: 10px;
			text-align: right;
		}

		.searchBox {
			margin-bottom: 10px;
		}
	}

	.GasolineRateModal-row {
		.label {
			width: 150px;
			display: inline-block;
			vertical-align: top;
		}

		.ant-col {
			margin-bottom: 15px !important;
		}
	}
</style>